import {useLocation,useHistory} from 'react-router-dom';
import { Form, Input, Button, Checkbox, message } from 'antd';
import { UserOutlined, LockOutlined, BankTwoTone } from '@ant-design/icons';
import axios from 'axios';
import {connect} from 'react-redux';

import './MyLogin.css';

axios.defaults.withCredentials = false;

const MyLogin = (props) => {

  const location = useLocation();
  const history = useHistory()

  const onFinish = (values) => {
    axios.post('http://localhost:8080/tuser/login',{
      username: values.username,
      password: values.password,
    }).then((res)=> {
      props.changeId(res.data);
      console.log(res)
      if(res.data===1) {
        message.success(`欢迎您，${values.username}`);
        document.cookie = 'username='+values.username;
        document.cookie = 'id='+res.data;
        props.changeUser(values.username);
        history.push('/admin');
      }else if(res.data>1){
        message.success(`欢迎您，${values.username}`);
        document.cookie = 'username='+values.username;
        document.cookie = 'id='+res.data;
        props.changeUser(values.username);
        history.push('/app');
      }else{
        onFinishFailed();
      }
    })
  };

  const onFinishFailed = () => {
    message.error('账号或密码错误');
  }

  return (
    <div className="container">
    <BankTwoTone className="icon"/>
    <Form
      name="normal_login"
      className="login-form"
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
      <Form.Item
        name="username"
        rules={[
          {
            required: true,
            message: '请输入用户名',
          },
        ]}
      >
        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
      </Form.Item>
      <Form.Item
        name="password"
        rules={[
          {
            required: true,
            message: '请输入密码',
          },
        ]}
      >
        <Input
          prefix={<LockOutlined className="site-form-item-icon" />}
          type="password"
          placeholder="Password"
        />
      </Form.Item>
      {/* <Form.Item>
        <Form.Item name="remember" valuePropName="checked" noStyle>
          <Checkbox>记住账号</Checkbox>
        </Form.Item>

        <a className="login-form-forgot" href="">
          忘记密码
        </a>
      </Form.Item> */}

      <Form.Item>
        <Button type="primary" htmlType="submit" className="login-form-button">
          登录
        </Button>
        <a onClick={()=>{history.push('/register')}}>注册</a>
      </Form.Item>
    </Form>
  </div>
  );
};

const MapStateToProps = (state)=>{
  return {
    username:state?.username,
    id:state?.id
  }
}

const MapDispatchToProps = (dispatch)=>{
  return {
    changeUser:(user)=>{dispatch({
      type:"CHANGE_USER",
      data:user
    })},
    changeId:(id)=>{
      dispatch({
        type:"CHANGE_ID",
        data:id
      })
    }
  }
}

export default connect(MapStateToProps,MapDispatchToProps)(MyLogin);